<template>
	<view class="content login-page bg-white">
		<view class="padding bg-white">
			<view class="cu-steps">
				<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'cuIcon-' + item.cuIcon"></text> <span class='step-text'>{{item.name}}</span>
				</view>
			</view>
		</view>
		<view class="input-group" v-if='basics == 0'>
			<m-input type="password" clearable v-model="params.password" placeholder="请输入6位纯数字密码" :title="'新密码'" :maxLength="11" :focus="true"></m-input>
			<m-input type="password" clearable v-model="params.rePassword" placeholder="请确认支付密码" :title="'确认密码'" :maxLength="11"></m-input>
			<m-input ref="imageCode" type="number" clearable v-model="params.imgcode" placeholder="图形验证码" :title="'图形验证码'" :maxLength="4"
			 :imageCode="true"></m-input>
			<m-input type="number" clearable v-model="params.bindCode" placeholder="手机验证码" :title="'手机验证码'" :maxLength="6">
				<button size="mini" class="text-orange text-style" style="font-size:30rpx"   :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
			</m-input>
			<button type="primary" class="primary round .btn-sub" @tap="reset" :loading="submitBtnDis">确定</button>
		</view>
		<view class="input-group" v-if='basics == 1'>
			<view class="orderContent bg-white" v-if="basicsList[1].name == '成功'">
				<view class="info">
					<image class="orderSuc" src="/static/img/orderSuc.png" mode="widthFix"></image><br>
					<text class="text-xxl">设置支付密码成功</text><br>
				</view>
			</view>
			<view class="orderContent bg-white" v-else>
				<view class="info">
					<image class="orderSuc" src="/static/img/error.png" mode="widthFix"></image><br>
					<text class="text-xxl">设置支付密码失败</text><br>
					<text class="text-df">{{errMsg}}</text><br>
					<text class="text-orange text-df" @tap="tryAgain">重新来过</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/new-my-input/m-input-addBank.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '设置支付密码'
				}, {
					cuIcon: 'roundcheckfill',
					name: '成功'
				}],
				basics: 0,
				btnDis: false,
				submitBtnDis: false,
				btnText: "获取验证码",
				params: {
					password: '',
					rePassword: "",
					imgcode: '',
					bindCode: ""
				},
				reqBody: {},
				checked: false,
				errMsg: '重置密码失败',
				t: null
			}
		},
		onLoad(query) {
			console.log(this.$refs.imageCode)
			this.initredirectRouteData(query);
			this.$refs.imageCode.getImgCode();
			if (this.hasSetPayPsw) {
				uni.setNavigationBarTitle({
					title: '重置支付密码'
				})
				this.basicsList[0].name = '重置支付密码'
			} else {
				uni.setNavigationBarTitle({
					title: '设置支付密码'
				})
				this.basicsList[0].name = '设置支付密码'
			}
		},
		computed: {
			...mapState(["openId", "userInfo"]),
			...mapGetters(['hasLogin', 'hasSetPayPsw'])
		},
		methods: {
			goPage(routeName) {
				let page = getCurrentPages()
				let redirecte = true
				if (page.length > 1) {
					console.log(page)
					if (page[page.length - 1].route.indexOf(routeName) !== -1) {
						redirecte = true
					} else {
						redirecte = false
					}
				} else {
					redirecte = false
				}
				if (redirecte) {
					this.$mRouter.redirectTo({
						route: this.$mRoutesConfig[routeName],
					})
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig[routeName],
					})
				}
			},
			tryAgain() {
				this.btnDis=false
				this.params = {
					password: '',
					rePassword: "",
					imgcode: '',
					bindCode: ""
				}
				this.basicsList[1] = {
					cuIcon: 'roundcheckfill',
					name: '成功'
				}

				clearInterval(this.t);
				this.btnText = "发送验证码"
				this.BasicsSteps()
				this.$nextTick(() => {
					this.$refs.imageCode.getImgCode();
				})
				
			},
			BasicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
				
			},
			// 发送验证码
			async sendCode(isUnbinding) {
				this.reqBody["code"] = this.params["imgcode"];
				let checkRes = graceChecker.check(this.reqBody, [{
					name: "code",
					checkType: "string",
					checkRule: "4",
					errorMsg: "请输入4位图片验证码"
				}]);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				await this.$apis.getPayCode({
					txcode: this.params.imgcode
				});
				uni.showToast({
					title: '发送成功,请查收'
				});
				// 开启倒计时
				this.countDown();
			},


			// 验证码倒计时
			countDown() {
				this.t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(this.t);
				this.btnText = `${timer}s`;
				this.t = setInterval(() => {
					if (timer == 0) {
						clearInterval(this.t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			initredirectRouteData(query) {
				if (query.redirectUrl) {
					this.redirectRoute.path = query.redirectUrl;
					delete query.redirectUrl;
					this.routeQuery = query;
				}
			},
			async reset() {
				try {
					let info = {}
					info["code"] = this.params["bindCode"];
					info["password"] = this.params["password"];
					info["rePassword"] = this.params["rePassword"];
					let checkRes = graceChecker.check(info, [{
							name: "password",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入密码"
						},
						{
							name: "rePassword",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入确认密码"
						},
						{
							name: "rePassword",
							checkType: "same",
							checkRule: info["password"],
							errorMsg: "两次输入密码不同，请重新输入"
						},
						{
							name: "code",
							checkType: "string",
							checkRule: "4",
							errorMsg: "请输入4位短信验证码"
						}
					]);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// 校验通过...
					this.submitBtnDis = true
					await this.$apis.setPayPass({
						pwd: this.params.password,
						code: this.params.bindCode
					});
					this.submitBtnDis = false
					this.BasicsSteps();
					let userInfo = JSON.parse(JSON.stringify(this.userInfo))
					userInfo.pay_password = 1
					this.$store.commit("SET_USERINFO", userInfo);
				}
				
				catch (e) {
					this.errMsg = e
					this.BasicsSteps()
					this.basicsList[1].cuIcon = 'roundclosefill',
						this.basicsList[1].name = '失败',
						this.submitBtnDis = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-white {
		background-color: #FFFFFF;
	}

	.step-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.cu-steps .cu-item [class*="cuIcon-"],
	.cu-steps .cu-item .num {
		line-height: 50rpx;
	}

	.cu-steps .cu-item:before,
	.cu-steps .cu-item:after,
	.cu-steps.steps-arrow .cu-item:before,
	.cu-steps.steps-arrow .cu-item:after {
		top: 25rpx;
	}

	.text-style {
		background: #FFFFFF;
	}
    .btn-sub{
		background: linear-gradient(to right,#ED503C,#FAA663);
		box-shadow: 5rpx 5rpx 10rpx rgba(241, 110, 74, 0.24);
	}
	button:after {
		border: none;
	}

	.input-group {
		width: 78.6%;
		margin: 0 auto;
		padding: 60rpx 0 115rpx;
		background-color: #fff;
		// border-radius: 10upx;
		border-radius: 10rpx;
		text-align: center;
		position: relative;

		image {
			width: 174rpx;
			margin: 50rpx auto;
			display: inline-block;
		}

		.primary {
			position: absolute;
			bottom: -50rpx;
			background-color: #FF6A00;
			width: 100%;
		}
	}

	.forget {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: rgba(198, 198, 199, 1);
		text-align: right;
	}

	.text-df {
		line-height: 80rpx;
	}
</style>
